<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>验证码</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <style>
    /* 为了实现平滑过渡效果 */
    .fade-transition {
      transition: opacity 0.3s ease;
    }
  </style>
</head>

<body class="bg-gray-100 min-h-screen flex flex-col justify-center items-center">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
  <h1 class="text-2xl font-bold text-center text-gray-800 mb-6">输入验证码</h1>
  <div id="confirm" class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
    <input type="text" name="inputCaptcha" id="inputCaptcha"
           class="border border-gray-300 rounded-md px-4 py-2 w-full focus:ring-blue-500 focus:border-blue-500">
    <img id="verificationCodeImg" src="/captcha/getCaptcha"
         class="cursor-pointer fade-transition border border-gray-300 rounded-md" style="height: 40px;"
         title="看不清？换一张">
    <input type="button" value="提交" id="checkCaptcha"
           class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("#verificationCodeImg").click(function () {
    $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
  });

  $("#checkCaptcha").click(function () {
    $.ajax({
      type: "post",
      url: "/captcha/check",
      data: {
        captcha: $("#inputCaptcha").val()
      },
      success: function (result) {
        if (result) {
          location.href = "success.html";
        } else {
          alert("验证码错误，请重新输入");
        }
      }
    });
  });
</script>
</body>

</html>
